<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>canvas</title>
    <style>
        body{
            padding:0;
            margin:0;
        }
        canvas{
            background:#eee;
            padding:0;
        }
        div{
            color: #000;
            background: #ddd;
            font-size: 16px;
        }
         p{
            position: absolute;
            left:420px; top: 50px;
            padding: 10px 30px;
            color: white;
            font-size: 20px;
            font-family: "Microsoft Yahei";
            
        }
        #canvas{
            cursor: pointer;
            background:#000;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src='../js/ball.js'></script>
    <script src="../js/arrow.js"></script>
    <script src='../js/utils.js'></script>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            canvas.width = document.body.clientWidth;
            canvas.height = document.body.scrollHeight;

            
            var ball = new Ball(20, "red"),
               vr = 0.05,
               cos = Math.cos(vr),
               sin = Math.sin(vr),
               centerX = canvas.width/2,
               centerY = canvas.height/2,
               canvasWidth = canvas.width,
               canvasHeight = canvas.height;
           
           
           
           // 根据初始的坐标确定旋转半径大小    
           ball.x = (Math.random()*canvasWidth)*0.6;
           ball.y = (Math.random()*canvasWidth)*0.6;	

           ball.x = canvas.width/2+100;
           ball.y = canvas.height/2+100;
           
           function circle(angle, radius){
               context.save();
               context.strokeStyle = "white";
               context.beginPath();
               context.arc(centerX, centerY, 40, 0, angle, false);
               context.arc(centerX, centerY, radius, 0, Math.PI*2, false); 
               context.stroke();
               context.restore();
           }
            function text(angle){
                context.save();
                context.beginPath();
                context.strokeStyle = "#49f";
                context.font = "20px Arial";
                context.strokeText(-(angle*360/Math.PI).toFixed(0), centerX-55, centerY+50);
                context.closePath();
                context.stroke();
                context.restore();
           }
           function coordinate(){
               context.save();
               context.strokeStyle = "white";
               context.beginPath();
               context.moveTo(0, canvasHeight/2);
               context.lineTo(canvasWidth, canvasHeight/2);
               context.moveTo(canvasWidth/2, 0);
               context.lineTo(canvasWidth/2, canvasHeight);
               context.closePath();
               context.stroke();
               context.restore();
           }
           
           (function drawFrame(){
               window.requestAnimationFrame(drawFrame, canvas);
               context.clearRect(0, 0, canvas.width, canvas.height);
               
               coordinate(context);
               
               var x1 = ball.x - centerX;
               var y1 = ball.y - centerY;
               
               var x2 = x1*cos - y1*sin;
               var y2 = y1*cos + x1*sin;
               
               ball.x = centerX + x2;
               ball.y = centerY + y2;
               
               var dx = ball.x - centerX;
               var dy = ball.y - centerY;
               var radius = Math.sqrt(dx*dx + dy*dy);
               var angle = Math.atan2(dy, dx);
               circle(angle, radius);
               text(angle);
               
               context.save();
               context.strokeStyle = "white";
               context.moveTo(centerX, centerY);
               context.lineTo(ball.x, ball.y);
               context.stroke();
               context.restore();
               
               ball.draw(context);
               
           }());

        }
    </script>
</body>
</html>
